<template>
  <div class="w-full mb-4">
    <div :class="['pb-2 mb-4', bottomLine ? 'border-b-1 border-gray-200' : '']">
      <div class="h-4 leading-4 cursor-pointer border-l-4 border-primary pl-2 inline-block" @click="state.isExpand = !state.isExpand">
        <span class="font-bold">{{ title }}</span>
        <a-tooltip v-if="tooltip" placement="right" :overlayStyle="{ maxWidth: tooltipWidth }">
          <template #title>
            <slot name="promptTitle"></slot>
          </template>
          <span style="margin-left: 4px"><question-circle-outlined /></span>
        </a-tooltip>
        <UpOutlined v-show="state.isExpand" class="text-2.5 ml-2 !text-gray-400" />
        <DownOutlined v-show="!state.isExpand" class="text-2.5 ml-2 !text-gray-400" />
      </div>
    </div>
    <transition-group name="fade">
      <div :key="title" v-show="state.isExpand">
        <slot></slot>
      </div>
    </transition-group>
  </div>
</template>

<script lang="ts" setup>
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
import { reactive } from 'vue';

const props = defineProps({
  title: {
    default: '',
    type: String
  },
  bottomLine: {
    default: false,
    type: Boolean
  },
  tooltip: {
    default: false,
    type: Boolean
  },
  tooltipWidth: {
    default: '',
    type: String
  }
});
const state = reactive({
  isExpand: true
});
</script>

<style lang="less" scoped></style>
